/**
* 逛店 - 组建
*/
<template>
    <article class="h-store">
      <div class="h-overflow">
        <aside class="h-aside fl">
          <p class="h-title">查找店铺</p>
          <p class="mb20">请输入位置（例如： 邮编、地址、城市...），我们将会为您显示最近的精品店。</p>
          
          <el-form :model="form" label-width="55px" >
            <el-form-item label="区域：">
              <el-select v-model="form.area" placeholder="请选择区域">
                <el-option label="全部" value="1"></el-option>
                <el-option :label="item.areaName" :value="item.id" :key="item.id" v-for="item in areaOption"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="店铺：">
              <el-input v-model="form.store" placeholder="请输入店铺名"></el-input>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="handleSearchClick">搜索店铺</el-button>
            </el-form-item>
          </el-form>
        </aside>

        <section class="h-section fr">
          <p class="h-title">搜索结果</p>
          <ul>
            <li v-for="item in storeList" :key="item.id">
              <p @click="handleStoreClick(item)">{{ item.name }}</p>
              <address>{{ item.area }} <span>TEL: {{ item.tel }}</span></address>
            </li>
          </ul>
          
          <el-pagination :current-page.sync="pagination.pageNum" :hide-on-single-page="true" :page-size="pagination.pageSize" :total="pagination.total"
                               @current-change="handleCurrentChange"
                               background layout="prev, pager, next"></el-pagination>
        </section>
      </div>
        <div class="h-area">
          <!--<el-amap vid="amap" :events="events" :plugin="plugin" class="amap" :center="center" :zoom="zoom">
  <el-amap-marker :position="center" vid="amapMarker"></el-amap-marker>
</el-amap>-->
<!--<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>-->
          <!--<el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
                  <el-amap-marker vid="amapMarker" :position="center"></el-amap-marker>
          </el-amap>-->
          <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler"></baidu-map>

        </div>
    </article>
</template>
<script>
import { areaList, storeMockList } from '@/mock' // 区域数据
import { areaData, searchStore } from '@/api'
import AMap from "vue-amap";
let amapManager = new AMap.AMapManager();

export default {
  name: 'store',
  props: {},
  data () {
    const _this = this
    return {
      form: {
        area: '1',
        store: ''
      },
      storeList: [], // 店铺列表
      areaOption: [], // 店铺所在地区 列表
      pagination: {
        total: 100,
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
      },
      // 百度
      center: {lng: 0, lat: 0},
      zoom: 3,
      // 百度
      // nearbyInfo: [], // 周边信息---高德反馈（周边建筑信息）
      // addressInfo: '', // 城市信息---高德反馈（省市区、adcode）
      
      amapManager,
      searchOption: {
        city: '上海',
        citylimit: true
      },
      markers: [],    
      zoom: 12, // 地图缩放
      center: [121, 31], // 高德地图中心点
      events: {
        init: o => {
          console.log('getCenter***********', o.getCenter());
          // console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            console.log('getCenter***********', result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        'click': (e) => { // 点击地图的时候，获取点击的经纬度，并将地图中心点移自此处
          console.log(e);
          _this.center = [e.lnglat.lng, e.lnglat.lat];//点击选择新地址为中心点
          
          let m = e.lnglat;
          _this.addrInput = '';
          _this.center = [m.lng, m.lat];
          _this.GDmapGetInfoOfNearby(m.lng, m.lat, _this); // 获取周边信息
        }
      },
      plugin: [ "ToolBar", {pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
    }, {
          pName: 'Geolocation',
          noIpLocate: 1, // ios11： 禁止ip定位：ios11之后默认是ip定位，参数为1则是禁止ip定位
          events: {
            init: (o) => {
              console.log('获取当前位置****', o)
              o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    _this.center = [result.position.lng, result.position.lat];
                    _this.$nextTick();
                    console.log('获取当前位置****', _this.center)
                  }
                })
//            _this.GDinit(o, _this); // 获取当前位置
            }
          }
      }, 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'
      ]
    }
  },
  created () {
    // this.getAreaData() // 查询店铺 分布区域列表
    this.areaMap() // 地图初始化
  },
  mounted () {
    this.areaOption = areaList.result // 使用接口时 此处删除
    this.storeList = storeMockList.result.list // 使用接口时 此处删除
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    /**
     *@Description
     *@Param
     *@Return 查询按钮 监听事件.
     **/
    handleSearchClick() {
      this.getSearchStore()
    },
    /**
     *@Description
     *@Param
     *@Return 查询店铺 方法封装.
     **/
    getSearchStore(){
      searchStore({ ...this.form, ...this.pagination }).then(res => {
        this.storeList = res
        this.pagination.total = res.total
      })
    },
    /**
     *@Description
     *@Param
     *@Return 查询店铺 分布区域列表.
     **/
    getAreaData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      areaData(params).then(res => {
        this.areaOption = res
      })
    },
    /**
     *@Description
     *@Param
     *@Return 分页.
     **/
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.getSearchStore()
    },
    /**
     *@Description
     *@Param
     *@Return 高德地图.
     **/
    areaMap(){
    },
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.center = [center.lng, center.lat];
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .h-store {
      overflow: hidden;
      border: 1px solid blue;
      .h-title{
        padding: 20px 0;
        margin-bottom: 15px;
        font-size: 16px;
        color: #333;
        border-bottom: 1px dashed #dcdcdc;
      }
      .h-overflow{
        overflow: hidden;
      }
      /* 侧边 - 查找店铺 */
      .h-aside {
        width: 400px;
        border: 1px solid blue;
      }
      /* 侧边 - 店铺查找结果 */
      .h-section{
        width: 550px;
        border: 1px solid blue;
        li{
          margin-bottom: 15px;
          p{
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
            cursor: pointer;
            &:hover{
              text-decoration: underline;
            }
          }
          address{
            color: #666;
          }
          span{
            padding-left: 10px;
          }
        }
      }
      /* 底部地图 */
      .h-area{
        width: 100%;
        height: 500px;
        border: 1px solid blue;
        .bm-view {
          width: 100%;
          height: 100%;
        }
      }
    }
</style>
